<template>
  <div class="user-profile-view">
    <div class="profile-container">
      <!-- 用户信息卡片 -->
      <div class="user-info-card">
        <div class="user-avatar-section">
          <el-upload
            class="avatar-uploader"
            :action="uploadUrl"
            :headers="uploadHeaders"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <el-avatar :size="120" :src="userInfo.avatar">
              {{ userInfo.userName?.charAt(0) }}
            </el-avatar>
            <div class="avatar-overlay">
              <el-icon><Camera /></el-icon>
              <span>更换头像</span>
            </div>
          </el-upload>
        </div>
        
        <div class="user-basic-info">
          <h2>{{ userInfo.userName }}</h2>
          <p class="user-email">{{ userInfo.email }}</p>
          <p class="user-bio">{{ userInfo.bio || '这个人很懒，什么都没有留下...' }}</p>
          
          <div class="user-stats">
            <div class="stat-item">
              <span class="stat-number">{{ userStats.noteCount }}</span>
              <span class="stat-label">笔记</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">{{ userStats.likeCount }}</span>
              <span class="stat-label">获赞</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">{{ userStats.favoriteCount }}</span>
              <span class="stat-label">收藏</span>
            </div>
            <div class="stat-item">
              <span class="stat-number">{{ userStats.followCount }}</span>
              <span class="stat-label">关注</span>
            </div>
          </div>
          
          <el-button type="primary" @click="showEditProfile = true">
            编辑资料
          </el-button>
        </div>
      </div>

      <!-- 标签页内容 -->
      <div class="profile-content">
        <el-tabs v-model="activeTab" @tab-change="handleTabChange">
          <!-- 我的笔记 -->
          <el-tab-pane label="我的笔记" name="notes">
            <div class="notes-section">
              <div class="section-header">
                <h3>我的笔记 ({{ myNotes.length }})</h3>
                <div class="filter-controls">
                  <el-select v-model="notesFilter.type" placeholder="类型" clearable @change="filterNotes">
                    <el-option label="全部" value="" />
                    <el-option label="日常笔记" value="daily" />
                    <el-option label="文档笔记" value="document" />
                  </el-select>
                  <el-select v-model="notesFilter.status" placeholder="状态" clearable @change="filterNotes">
                    <el-option label="全部" value="" />
                    <el-option label="已发布" value="published" />
                    <el-option label="草稿" value="draft" />
                  </el-select>
                  <el-input
                    v-model="notesFilter.keyword"
                    placeholder="搜索笔记..."
                    @input="filterNotes"
                    style="width: 200px"
                  >
                    <template #prefix>
                      <el-icon><Search /></el-icon>
                    </template>
                  </el-input>
                </div>
              </div>
              
              <div class="notes-list" v-loading="notesLoading">
                <div v-if="filteredNotes.length === 0" class="empty-state">
                  <el-empty description="暂无笔记" />
                </div>
                <div v-else class="notes-grid">
                  <div
                    v-for="note in filteredNotes"
                    :key="note.id"
                    class="note-card"
                    @click="goToNoteDetail(note.id)"
                  >
                    <div class="note-header">
                      <h4 class="note-title">{{ note.title }}</h4>
                      <el-dropdown @command="handleNoteAction">
                        <el-icon class="note-menu"><MoreFilled /></el-icon>
                        <template #dropdown>
                          <el-dropdown-menu>
                            <el-dropdown-item :command="`edit-${note.id}`">编辑</el-dropdown-item>
                            <el-dropdown-item :command="`delete-${note.id}`" divided>删除</el-dropdown-item>
                          </el-dropdown-menu>
                        </template>
                      </el-dropdown>
                    </div>
                    
                    <p class="note-summary">{{ note.summary || note.content?.substring(0, 100) + '...' }}</p>
                    
                    <div class="note-meta">
                      <div class="note-tags">
                        <el-tag v-if="note.type === 'daily'" type="success" size="small">日常</el-tag>
                        <el-tag v-if="note.type === 'document'" type="primary" size="small">文档</el-tag>
                        <el-tag v-if="note.status === 'draft'" type="warning" size="small">草稿</el-tag>
                      </div>
                      <div class="note-stats">
                        <span><el-icon><View /></el-icon> {{ note.viewCount || 0 }}</span>
                        <span><el-icon><Star /></el-icon> {{ note.likeCount || 0 }}</span>
                      </div>
                    </div>
                    
                    <div class="note-date">{{ formatDate(note.createTime) }}</div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>

          <!-- 我的收藏 -->
          <el-tab-pane label="我的收藏" name="favorites">
            <div class="favorites-section">
              <div class="section-header">
                <h3>我的收藏 ({{ myFavorites.length }})</h3>
              </div>
              
              <div class="favorites-list" v-loading="favoritesLoading">
                <div v-if="myFavorites.length === 0" class="empty-state">
                  <el-empty description="暂无收藏" />
                </div>
                <div v-else class="favorites-grid">
                  <div
                    v-for="favorite in myFavorites"
                    :key="favorite.id"
                    class="favorite-card"
                    @click="goToNoteDetail(favorite.noteId)"
                  >
                    <div class="favorite-header">
                      <h4 class="favorite-title">{{ favorite.noteTitle }}</h4>
                      <el-button
                        type="danger"
                        size="small"
                        text
                        @click.stop="removeFavorite(favorite.id)"
                      >
                        取消收藏
                      </el-button>
                    </div>
                    
                    <p class="favorite-summary">{{ favorite.noteSummary }}</p>
                    
                    <div class="favorite-meta">
                      <div class="favorite-author">
                        <el-avatar :size="24" :src="favorite.userAvatar">
                          {{ favorite.userName?.charAt(0) }}
                        </el-avatar>
                        <span>{{ favorite.userName }}</span>
                      </div>
                      <div class="favorite-date">{{ formatDate(favorite.createTime) }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>

          <!-- 我的点赞 -->
          <el-tab-pane label="我的点赞" name="likes">
            <div class="likes-section">
              <div class="section-header">
                <h3>我的点赞 ({{ myLikes.length }})</h3>
              </div>
              
              <div class="likes-list" v-loading="likesLoading">
                <div v-if="myLikes.length === 0" class="empty-state">
                  <el-empty description="暂无点赞" />
                </div>
                <div v-else class="likes-grid">
                  <div
                    v-for="like in myLikes"
                    :key="like.id"
                    class="like-card"
                    @click="goToNoteDetail(like.noteId)"
                  >
                    <div class="like-header">
                      <h4 class="like-title">{{ like.noteTitle }}</h4>
                      <el-button
                        type="danger"
                        size="small"
                        text
                        @click.stop="removeLike(like.id)"
                      >
                        取消点赞
                      </el-button>
                    </div>
                    
                    <p class="like-summary">{{ like.noteSummary }}</p>
                    
                    <div class="like-meta">
                      <div class="like-author">
                        <el-avatar :size="24" :src="like.userAvatar">
                          {{ like.userName?.charAt(0) }}
                        </el-avatar>
                        <span>{{ like.userName }}</span>
                      </div>
                      <div class="like-date">{{ formatDate(like.createTime) }}</div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>

          <!-- 账户设置 -->
          <el-tab-pane label="账户设置" name="settings">
            <div class="settings-section">
              <el-card class="setting-card">
                <template #header>
                  <h3>基本设置</h3>
                </template>
                
                <el-form :model="settingsForm" label-width="100px">
                  <el-form-item label="邮箱通知">
                    <el-switch v-model="settingsForm.emailNotification" />
                    <span class="setting-desc">接收系统通知和消息提醒</span>
                  </el-form-item>
                  
                  <el-form-item label="隐私设置">
                    <el-switch v-model="settingsForm.profilePublic" />
                    <span class="setting-desc">允许其他用户查看我的资料</span>
                  </el-form-item>
                  
                  <el-form-item label="主题设置">
                    <el-radio-group v-model="settingsForm.theme">
                      <el-radio label="light">浅色主题</el-radio>
                      <el-radio label="dark">深色主题</el-radio>
                      <el-radio label="auto">跟随系统</el-radio>
                    </el-radio-group>
                  </el-form-item>
                  
                  <el-form-item>
                    <el-button type="primary" @click="saveSettings">保存设置</el-button>
                  </el-form-item>
                </el-form>
              </el-card>
              
              <el-card class="setting-card">
                <template #header>
                  <h3>安全设置</h3>
                </template>
                
                <div class="security-item">
                  <div class="security-info">
                    <h4>修改密码</h4>
                    <p>定期修改密码可以提高账户安全性</p>
                  </div>
                  <el-button @click="showChangePassword = true">修改密码</el-button>
                </div>
                
                <div class="security-item">
                  <div class="security-info">
                    <h4>注销账户</h4>
                    <p>注销后将无法恢复，请谨慎操作</p>
                  </div>
                  <el-button type="danger" @click="confirmDeleteAccount">注销账户</el-button>
                </div>
              </el-card>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>

    <!-- 编辑资料对话框 -->
    <el-dialog v-model="showEditProfile" title="编辑资料" width="500px">
      <el-form ref="profileFormRef" :model="profileForm" :rules="profileRules" label-width="80px">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="profileForm.userName" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="profileForm.email" disabled />
        </el-form-item>
        <el-form-item label="个人简介" prop="bio">
          <el-input
            v-model="profileForm.bio"
            type="textarea"
            :rows="4"
            placeholder="介绍一下自己吧..."
            maxlength="200"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showEditProfile = false">取消</el-button>
        <el-button type="primary" :loading="updateLoading" @click="updateProfile">
          保存
        </el-button>
      </template>
    </el-dialog>

    <!-- 修改密码对话框 -->
    <el-dialog v-model="showChangePassword" title="修改密码" width="400px">
      <el-form ref="passwordFormRef" :model="passwordForm" :rules="passwordRules" label-width="100px">
        <el-form-item label="当前密码" prop="oldPassword">
          <el-input v-model="passwordForm.oldPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="passwordForm.newPassword" type="password" show-password />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input v-model="passwordForm.confirmPassword" type="password" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showChangePassword = false">取消</el-button>
        <el-button type="primary" :loading="passwordLoading" @click="changePassword">
          确认修改
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Camera, Search, View, Star, MoreFilled } from '@element-plus/icons-vue'
import type { FormInstance, FormRules, UploadProps } from 'element-plus'
import {
  getUserInfo as getUserProfile,
  updateUserInfo,
  updatePassword,
  getUserNotes,
  getUserFavorites,
  getUserLikes,
  deleteNote,
  removeFavorite as removeFavoriteApi,
  removeLike as removeLikeApi,
  deleteAccount
} from '@/api/user'
import dayjs from 'dayjs'

const router = useRouter()
const userStore = useUserStore()

// 表单引用
const profileFormRef = ref<FormInstance>()
const passwordFormRef = ref<FormInstance>()

// 页面状态
const activeTab = ref('notes')
const showEditProfile = ref(false)
const showChangePassword = ref(false)
const updateLoading = ref(false)
const passwordLoading = ref(false)
const notesLoading = ref(false)
const favoritesLoading = ref(false)
const likesLoading = ref(false)

// 用户信息
const userInfo = ref({
  userName: '',
  email: '',
  avatar: '',
  bio: ''
})

// 用户统计
const userStats = ref({
  noteCount: 0,
  likeCount: 0,
  favoriteCount: 0,
  followCount: 0
})

// 我的笔记
const myNotes = ref<any[]>([])
const notesFilter = reactive({
  type: '',
  status: '',
  keyword: ''
})

// 我的收藏
const myFavorites = ref<any[]>([])

// 我的点赞
const myLikes = ref<any[]>([])

// 编辑资料表单
const profileForm = reactive({
  userName: '',
  email: '',
  bio: ''
})

// 修改密码表单
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 设置表单
const settingsForm = reactive({
  emailNotification: true,
  profilePublic: true,
  theme: 'light'
})

// 上传配置
const uploadUrl = ref('/api/upload/avatar')
const uploadHeaders = computed(() => ({
  Authorization: `Bearer ${userStore.token}`
}))

// 表单验证规则
const profileRules: FormRules = {
  userName: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在3到20个字符', trigger: 'blur' }
  ]
}

const passwordRules: FormRules = {
  oldPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' }
  ],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6到20个字符', trigger: 'blur' }
  ],
  confirmPassword: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (value !== passwordForm.newPassword) {
          callback(new Error('两次输入的密码不一致'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ]
}

// 过滤后的笔记
const filteredNotes = computed(() => {
  let notes = myNotes.value
  
  if (notesFilter.type) {
    notes = notes.filter(note => note.type === notesFilter.type)
  }
  
  if (notesFilter.status) {
    notes = notes.filter(note => note.status === notesFilter.status)
  }
  
  if (notesFilter.keyword) {
    const keyword = notesFilter.keyword.toLowerCase()
    notes = notes.filter(note =>
      note.title.toLowerCase().includes(keyword) ||
      note.content?.toLowerCase().includes(keyword)
    )
  }
  
  return notes
})

// 获取用户资料
const getUserInfo = async () => {
  try {
    const response = await getUserProfile()
    if (response.code === 200) {
      userInfo.value = response.data.userInfo
      userStats.value = response.data.userStats
      
      // 填充编辑表单
      Object.assign(profileForm, {
        userName: userInfo.value.userName,
        email: userInfo.value.email,
        bio: userInfo.value.bio
      })
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
  }
}

// 获取我的笔记
const getMyNotes = async () => {
  notesLoading.value = true
  try {
    const response = await getUserNotes()
    if (response.code === 200) {
      myNotes.value = response.data
    }
  } catch (error) {
    console.error('获取笔记列表失败:', error)
  } finally {
    notesLoading.value = false
  }
}

// 获取我的收藏
const getMyFavorites = async () => {
  favoritesLoading.value = true
  try {
    const response = await getUserFavorites()
    if (response.code === 200) {
      myFavorites.value = response.data
    }
  } catch (error) {
    console.error('获取收藏列表失败:', error)
  } finally {
    favoritesLoading.value = false
  }
}

// 获取我的点赞
const getMyLikes = async () => {
  likesLoading.value = true
  try {
    const response = await getUserLikes()
    if (response.code === 200) {
      myLikes.value = response.data
    }
  } catch (error) {
    console.error('获取点赞列表失败:', error)
  } finally {
    likesLoading.value = false
  }
}

// 标签页切换
const handleTabChange = (tabName: string) => {
  switch (tabName) {
    case 'notes':
      if (myNotes.value.length === 0) {
        getMyNotes()
      }
      break
    case 'favorites':
      if (myFavorites.value.length === 0) {
        getMyFavorites()
      }
      break
    case 'likes':
      if (myLikes.value.length === 0) {
        getMyLikes()
      }
      break
  }
}

// 过滤笔记
const filterNotes = () => {
  // 过滤逻辑在计算属性中处理
}

// 头像上传成功
const handleAvatarSuccess: UploadProps['onSuccess'] = (response) => {
  if (response.code === 200) {
    userInfo.value.avatar = response.data.url
    ElMessage.success('头像更新成功')
  } else {
    ElMessage.error(response.msg || '头像上传失败')
  }
}

// 头像上传前验证
const beforeAvatarUpload: UploadProps['beforeUpload'] = (file) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG) {
    ElMessage.error('头像只能是 JPG/PNG 格式!')
  }
  if (!isLt2M) {
    ElMessage.error('头像大小不能超过 2MB!')
  }
  return isJPG && isLt2M
}

// 更新资料
const updateProfile = async () => {
  if (!profileFormRef.value) return
  
  await profileFormRef.value.validate(async (valid) => {
    if (valid) {
      updateLoading.value = true
      try {
        const response = await updateUserInfo(profileForm)
        if (response.code === 200) {
          Object.assign(userInfo.value, profileForm)
          showEditProfile.value = false
          ElMessage.success('资料更新成功')
        } else {
          ElMessage.error(response.msg || '更新失败')
        }
      } catch (error) {
        console.error('更新资料失败:', error)
        ElMessage.error('更新失败')
      } finally {
        updateLoading.value = false
      }
    }
  })
}

// 修改密码
const changePassword = async () => {
  if (!passwordFormRef.value) return
  
  await passwordFormRef.value.validate(async (valid) => {
    if (valid) {
      passwordLoading.value = true
      try {
        const response = await updatePassword({
          oldPassword: passwordForm.oldPassword,
          newPassword: passwordForm.newPassword
        })
        if (response.code === 200) {
          showChangePassword.value = false
          Object.assign(passwordForm, {
            oldPassword: '',
            newPassword: '',
            confirmPassword: ''
          })
          ElMessage.success('密码修改成功')
        } else {
          ElMessage.error(response.msg || '修改失败')
        }
      } catch (error) {
        console.error('修改密码失败:', error)
        ElMessage.error('修改失败')
      } finally {
        passwordLoading.value = false
      }
    }
  })
}

// 保存设置
const saveSettings = () => {
  ElMessage.success('设置保存成功')
}

// 笔记操作
const handleNoteAction = (command: string) => {
  const [action, id] = command.split('-')
  const noteId = parseInt(id)
  
  if (action === 'edit') {
    router.push(`/note/edit/${noteId}`)
  } else if (action === 'delete') {
    ElMessageBox.confirm('确定要删除这篇笔记吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(async () => {
      try {
        const response = await deleteNote(noteId)
        if (response.code === 200) {
          myNotes.value = myNotes.value.filter(note => note.id !== noteId)
          ElMessage.success('删除成功')
        } else {
          ElMessage.error(response.msg || '删除失败')
        }
      } catch (error) {
        console.error('删除笔记失败:', error)
        ElMessage.error('删除失败')
      }
    })
  }
}

// 取消收藏
const removeFavorite = async (id: number) => {
  try {
    const response = await removeFavoriteApi(id)
    if (response.code === 200) {
      myFavorites.value = myFavorites.value.filter(item => item.id !== id)
      ElMessage.success('已取消收藏')
    } else {
      ElMessage.error(response.msg || '操作失败')
    }
  } catch (error) {
    console.error('取消收藏失败:', error)
    ElMessage.error('操作失败')
  }
}

// 取消点赞
const removeLike = async (id: number) => {
  try {
    const response = await removeLikeApi(id)
    if (response.code === 200) {
      myLikes.value = myLikes.value.filter(item => item.id !== id)
      ElMessage.success('已取消点赞')
    } else {
      ElMessage.error(response.msg || '操作失败')
    }
  } catch (error) {
    console.error('取消点赞失败:', error)
    ElMessage.error('操作失败')
  }
}

// 跳转到笔记详情
const goToNoteDetail = (id: number) => {
  // 这里需要根据笔记类型跳转，暂时默认跳转到daily类型
  router.push(`/note/daily/${id}`)
}

// 确认注销账户
const confirmDeleteAccount = () => {
  ElMessageBox.confirm(
    '注销账户后，您的所有数据将被永久删除且无法恢复。确定要继续吗？',
    '注销账户',
    {
      confirmButtonText: '确定注销',
      cancelButtonText: '取消',
      type: 'error',
      confirmButtonClass: 'el-button--danger'
    }
  ).then(async () => {
    try {
      const response = await deleteAccount()
      if (response.code === 200) {
        ElMessage.success('账户注销成功')
        userStore.logout()
        router.push('/')
      } else {
        ElMessage.error(response.msg || '注销失败')
      }
    } catch (error) {
      console.error('注销账户失败:', error)
      ElMessage.error('注销失败')
    }
  })
}

// 格式化日期
const formatDate = (date: string) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm')
}

// 页面初始化
onMounted(() => {
  getUserInfo()
  getMyNotes()
})
</script>

<style scoped>
.user-profile-view {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.profile-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.user-info-card {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  gap: 30px;
  align-items: center;
}

.user-avatar-section {
  position: relative;
}

.avatar-uploader {
  position: relative;
  cursor: pointer;
}

.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 0.8rem;
}

.avatar-uploader:hover .avatar-overlay {
  opacity: 1;
}

.user-basic-info {
  flex: 1;
}

.user-basic-info h2 {
  font-size: 1.8rem;
  color: #303133;
  margin-bottom: 8px;
}

.user-email {
  color: #909399;
  margin-bottom: 10px;
}

.user-bio {
  color: #606266;
  margin-bottom: 20px;
  line-height: 1.6;
}

.user-stats {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  display: block;
  font-size: 1.5rem;
  font-weight: bold;
  color: #409eff;
}

.stat-label {
  color: #909399;
  font-size: 0.9rem;
}

.profile-content {
  background: white;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.section-header h3 {
  color: #303133;
  margin: 0;
}

.filter-controls {
  display: flex;
  gap: 15px;
  align-items: center;
}

.empty-state {
  text-align: center;
  padding: 60px 0;
}

.notes-grid,
.favorites-grid,
.likes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.note-card,
.favorite-card,
.like-card {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.note-card:hover,
.favorite-card:hover,
.like-card:hover {
  border-color: #409eff;
  box-shadow: 0 2px 12px rgba(64, 158, 255, 0.1);
}

.note-header,
.favorite-header,
.like-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.note-title,
.favorite-title,
.like-title {
  font-size: 1.1rem;
  color: #303133;
  margin: 0;
  flex: 1;
  margin-right: 10px;
}

.note-menu {
  cursor: pointer;
  color: #909399;
}

.note-summary,
.favorite-summary,
.like-summary {
  color: #606266;
  line-height: 1.6;
  margin-bottom: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.note-meta,
.favorite-meta,
.like-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.note-tags {
  display: flex;
  gap: 8px;
}

.note-stats {
  display: flex;
  gap: 15px;
  color: #909399;
  font-size: 0.9rem;
}

.note-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.note-date,
.favorite-date,
.like-date {
  color: #c0c4cc;
  font-size: 0.8rem;
}

.favorite-author,
.like-author {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #606266;
  font-size: 0.9rem;
}

.setting-card {
  margin-bottom: 20px;
}

.setting-desc {
  margin-left: 10px;
  color: #909399;
  font-size: 0.9rem;
}

.security-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #f0f0f0;
}

.security-item:last-child {
  border-bottom: none;
}

.security-info h4 {
  color: #303133;
  margin: 0 0 5px;
}

.security-info p {
  color: #909399;
  margin: 0;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .user-profile-view {
    padding: 10px;
  }
  
  .user-info-card {
    flex-direction: column;
    text-align: center;
    padding: 20px;
  }
  
  .user-stats {
    justify-content: center;
  }
  
  .profile-content {
    padding: 20px;
  }
  
  .section-header {
    flex-direction: column;
    gap: 15px;
    align-items: stretch;
  }
  
  .filter-controls {
    flex-wrap: wrap;
  }
  
  .notes-grid,
  .favorites-grid,
  .likes-grid {
    grid-template-columns: 1fr;
  }
  
  .security-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
}
</style>